@import "/web/css/common/main-mobile";

@font-color : #abcbe4;
@font-color-red : #f00;

.icon-music{position: fixed;width: 36/@rem;height: 36/@rem;top: 26/@rem;right: 26/@rem;background: url("../../img/icon-music.png") center / contain;z-index: 10;}
.icon-music.no{background-image: url("../../img/icon-music-active.png");}

.main-swiper{
    width: 100%;height: 100%;
    .swiper-slide{
        position: relative;font-size: 26/@rem;color: #fff;background: url("img/slide-bg.jpg") center / cover no-repeat;
        & > *{position: absolute;}
        .title{width: 100%;top: 92/@rem;left: 0;font-size: 46/@rem;text-align: center;font-weight: bold;line-height: 50/@rem;}
        .top-logo{width: 236/@rem;left: 30/@rem;top: 15/@rem;}
        .top-tit{width: 278/@rem;right: 90/@rem;top: 24/@rem;}
        .car-logo{bottom: 0;width: 400/@rem;left: 175/@rem;}
        .arrow-down{width: 40/@rem;left: 50%;margin-left: -20/@rem;bottom: 130/@rem;z-index: 1;opacity: .5;}
        .df-bg{bottom: 0;width: 100%;left: 0;
            img{display: block;}
            .num{position: absolute;line-height: 75/@rem;bottom: 0;left: 45/@rem;font-size: 28/@rem;color: @font-color-red;font-weight: bold;}
        }
        h2{
            position: absolute;font-size: 28/@rem;padding-left: 24/@rem;font-weight: normal;line-height: 30/@rem;background: url("img/icon-title.png") no-repeat;background-position: left 7/@rem;background-size: 15/@rem;
            b{font-weight: normal;color: @font-color-red;}
            span{font-size: 20/@rem;}
        }
    }

    .slide1{
        .arrow-down{bottom: 150/@rem;}
        .logo{width: 162/@rem;left: 314/@rem;top: 50/@rem;}
        .title{width: 750/@rem;left: 0;top: 220/@rem;font-size: 38/@rem;}
        .title-bg{width: 672/@rem;top: 468/@rem;left: 39/@rem;}
        .tit1{width: 682/@rem;top: 330/@rem;left: 34/@rem;}
        .txt{
            width: 650/@rem;top: 530/@rem;left: 50/@rem;line-height: 44/@rem;letter-spacing: 4/@rem;text-align: justify;
            p{text-indent: 2em;}
            span{color: @font-color-red;}
        }
    }

    .slide2{
        .txt{
            width: 100%;top: 90/@rem;left: 0;text-align: center;
            .p1{font-size: 34/@rem;font-weight: bold;}
            .p2{font-size: 26/@rem;margin-top: 10/@rem;}
            .p3{font-size: 22/@rem;margin-top: 10/@rem;}
        }
        .house{width: 540/@rem;top: 260/@rem;left: 98/@rem;}
        .img{width: 660/@rem;top: 690/@rem;left: 45/@rem;}
        .img1{width: 278/@rem;top: 630/@rem;left: 236/@rem;}
    }

    .slide3{
        .icon{width: 540/@rem;left: 105/@rem;top: 150/@rem;}
        [class^=h2-]{left: 60/@rem;}
        .h2-1{top: 205/@rem;}
        .h2-2{top: 550/@rem;}
        .h2-3{top: 840/@rem;}
        .img1{width: 544/@rem;left: 103/@rem;top: 260/@rem;}
        .img2{width: 550/@rem;left: 100/@rem;top: 340/@rem;}
        .img3{width: 628/@rem;left: 66/@rem;top: 610/@rem;}
        .img4{width: 656/@rem;left: 49/@rem;top: 880/@rem;}
    }

    .slide4{
        [class^=h2-]{left: 50/@rem;}
        .h2-1{top: 205/@rem;}
        .img1{width: 610/@rem;height: 345/@rem;top: 250/@rem;left: 70/@rem;
            .img1-1{float: left;width: 153/@rem;}
            .img1-2{float: left;width: 284/@rem;margin-left: 18/@rem;margin-top: 112/@rem;}
            .img1-3{float: right;width: 153/@rem;}
        }
        .cont-box{
            width: 100%;top: 600/@rem;
            .img2{width: 230/@rem;margin-top: 56/@rem;margin-left: 70/@rem;float: left;}
            .h2-3{left: 374/@rem;}
            .img3{width: 353/@rem;float: left;margin-left: 60/@rem;margin-top: 44/@rem;}
        }
    }

    .slide5{
        .cont-box{
            width: 610/@rem;left: 70/@rem;height: 422/@rem;top: 400/@rem;
            [class^=group]{
                position: absolute;width: 152/@rem;height: 136/@rem;
                & > *{position: absolute;}
                img{display: block;}
                h2{width: 400/@rem;top: -146/@rem;
                    &.down{top: auto;bottom: -146/@rem;}
                }
                .line{
                    width: 10/@rem;height: 104/@rem;left: 50%;margin-left: -5/@rem;background-size: 100%;
                    &.up{background-image: url("img/slide5-line-up.png");top: -104/@rem;}
                    &.down{background-image: url("img/slide5-line-down.png");bottom: -104/@rem;}
                }
            }
            .group1{top: 175/@rem;}
            .group2{top: 90/@rem;left: 152/@rem;
                h2{left: -90/@rem;}
            }
            .group3{top: 0;left: 304/@rem;
                h2{left: -120/@rem;}
            }
            .group4{top: 108/@rem;left: 456/@rem;
                h2{left: -40/@rem;}
            }
            .group5{top: 195/@rem;left: 304/@rem;
                h2{left: -40/@rem;}
            }
            .group6{top: 282/@rem;left: 152/@rem;
                h2{left: -80/@rem;}
            }
        }
    }

    .slide6{
        .img-bg{width: 329/@rem;left: 265/@rem;top: 370/@rem;
            img{display: block;}
            [class^=gear]{position: absolute;}
            .gear1{width: 92/@rem;left: 70/@rem;top: 32/@rem;}
            .gear2{width: 119/@rem;left: 176/@rem;top: 114/@rem;}
            .gear3{width: 182/@rem;left: 34/@rem;top: 248/@rem;}
        }
        .img1{width: 532/@rem;top: 230/@rem;left: 190/@rem;}
        .img2{width: 363/@rem;top: 384/@rem;left: 50/@rem;}
        .img3{width: 550/@rem;top: 794/@rem;left: 176/@rem;}
    }

}

//动画命名
.ani-music{animation: ani-music 2s linear infinite;}
.ani-down{animation: ani-down 1.5s infinite;}
.ani-print{animation: ani-print 2s infinite;}
.ani-into{animation: ani-into 1.5s infinite;}
.ani-pulse{animation: ani-pulse 1.5s infinite;}

//音乐播放转动
@keyframes ani-music {
    100% {
        transform: rotate(360deg);
    }
}

//提示下滑
@keyframes ani-down {
    50%{
        transform : translateY(15px);
    }
}

//指纹动画
@keyframes ani-print {
    100% {
        transform: translateY(280/@rem);
    }
}

//入口处动画
@keyframes ani-into {
    50%{
        transform : translateY(15px);
    }
}

//大小css动画
@keyframes ani-pulse {
    50% {
        transform: scale3d(0.9, 0.9, 0.9);
    }
}